<template>
	<view class="content">
		<image class="logo mb-10 w-[200rpx] h-[200rpx] " src="/static/logo.png"></image>
		<!-- <view class="text-area">
			<text class="title">{{store.title}}</text>
		</view>
		<view class="counter-area">
			<text class="count">Count: {{store.count}}</text>
			<text class="double-count">Double Count: {{store.doubleCount}}</text>
			<button @click="handleIncrement">增加</button>
			<button @click="handleUpdateTitle">更新标题</button>
		</view>
		<view class="input-area">
			<text>输入内容: {{modelValue}}</text>
			<input 
				:value="modelValue"
				@input="handleInput"
				class="custom-input"
				placeholder="请输入文本"
			/>
			<button @click="handleSaveText">保存文本到 Store</button>
			
		</view> -->

		<!-- <child v-model="num" /> -->
		<view class="content">
			<!-- <TimePicker v-model="time" label="选择时间" required />
			<DateTimePicker v-model="dateTime" label="预约时间" required ref="dateTimePickerRef" /> -->
			<template v-for="(item, index) in forms" :key="item.name">
				<component :is="item.type" v-model="formData[item.name]" :label="item.label" :required="item.required"
					:reg="item.reg" :regErrorMessage="item.regErrorMessage" :placeholder="item.placeholder"
					:ref="el => formRefs[item.name] = el" />
			</template>
			<!-- <button @click="handleSubmit">提交</button> -->
			<CustomButton text="提交" ref="buttonRef" :disabled="false" backgroundColor="#409eff" @click="handleSubmit" />
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import DatePicker from '@/components/DatePicker.vue'
import InputField from '@/components/InputField.vue'
import TimePicker from '@/components/TimePicker.vue'
import DateTimePicker from '@/components/DateTimePicker.vue'
import CustomButton from '@/components/CustomButton.vue'
const buttonRef = ref(null)


const forms = [
	{
		type: TimePicker,
		label: "选择时间",
		name: "time",
		required: true
	},
	{
		type: DateTimePicker,
		label: "预约时间",
		name: "dateTime",
		required: true
	},
	{
		type: DatePicker,
		label: "生日",
		name: "date",
		required: true
	},
	{
		type: InputField,
		label: "姓名",
		name: "name",
		required: true,
		placeholder: "请输入姓名"
	},
	{
		type: InputField,
		label: "介绍",
		name: "info",
		placeholder: "请输入个人介绍"
	},
	{
		type: InputField,
		label: "手机号",
		name: "phone",
		required: true,
		reg: /^1[3-9]\d{9}$/,
		regErrorMessage: "请输入正确的手机号",
		placeholder: "请输入手机号"
	}
]

const formData = reactive({})
const formRefs = reactive({})

const handleSubmit = () => {
	buttonRef.value.setLoading(true)
	// 遍历所有表单项进行验证
	for (const item of forms) {
		if (formRefs[item.name] && !formRefs[item.name].validate()) {
			return
		}
	}
	console.log('表单数据：', formData)
	
}
</script>

<style>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.logo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 200rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}

.text-area {
	display: flex;
	justify-content: center;
}

.title {
	font-size: 36rpx;
	color: #8f8f94;
}

.counter-area {
	margin-top: 30rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20rpx;
}

.count,
.double-count {
	font-size: 32rpx;
	color: #333;
}

button {
	margin: 10rpx 0;
	padding: 20rpx 40rpx;
}

.input-area {
	margin-top: 40rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20rpx;
}

.custom-input {
	border: 1px solid #ddd;
	padding: 10rpx 20rpx;
	border-radius: 8rpx;
	width: 300rpx;
	margin: 20rpx 0;
}
</style>
